<template>
  <t-card class="dashboard-detail-card" :style="{ height: '418px' }">
    <div class="hw-flex-style-b-c">
      <span class="title1">展览动态</span>
      <span class="hw-click-cursor rihgt-title" @click="lookWhole">查看全部</span>
    </div>
    <div class="scroll-box">
      <t-timeline mode="same" v-if="props.info">
        <t-timeline-item v-for="item in props.info.logs" :key="item.id">
          <div v-if="item.centerTitle">
            <!-- <span class="title2">{{ item.userName }}</span> -->
            <span class="title3">{{ item.centerTitle }}</span>
            <span class="title4 hw-click-cursor" @click="pathtype(item.refType)">#{{ item.refName }}#</span>
            <span class="title5">{{ item.centerTitleright }}</span>
          </div>
          <div v-else>
            <span class="content-text">{{ item.content }}</span>
          </div>
          <div :style="CommonStyle" class="hw-box-style-flex hw-box-style-flex-r-center">
            <t-avatar size="24px" :image="urls + item.coverUrl + webUrls" v-if="item.coverUrl"> </t-avatar>
            <t-avatar
              size="24px"
              v-else
              image="https://static-1316349889.cos.ap-shanghai.myqcloud.com/assets/img/userImg.png"
            ></t-avatar>
            <span class="title6">{{ item.userName }}</span>
            <span class="title7">{{ item.createDate }}</span>
          </div>
        </t-timeline-item>
      </t-timeline>
    </div>
  </t-card>
</template>

<script setup lang="ts">
// @ts-nocheck
import { urls } from '@/utils/request/upload';
import { useRouter } from 'vue-router';
import { ref } from 'vue';

const webUrls: string = '?imageView2/1/w/28/h/28/format/webp';

const props = defineProps({
  info: {
    type: Object,
  },
});
const router = useRouter();
const CommonStyle = {
  margin: '8px 0',
  color: 'rgba(0,0,0,.6)',
  display: 'flex',
};
const lookWhole = () => {
  router.push({
    path: '/prijectMenu/administration',
    query: { projectId: localStorage.getItem('projectId'), type: 4 },
  });
};
const pathtype = (e: number) => {
  let pathName: String = '';
  switch (e) {
    case 2:
      pathName = '/prijectMenu/member';
      break;
    case 3:
      pathName = '/prijectMenu/administration';
      break;
    case 4:
      pathName = '/prijectMenu/exhibits';
      break;
  }

  router.push({ path: pathName, query: { projectId: localStorage.getItem('projectId') } });
};
</script>

<style lang="less" scoped>
div {
  font-family: PingFangSC-Regular, PingFang SC;
}
:deep(.title1) {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 28px;
}

.rihgt-title {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;

  color: rgba(0, 0, 0, 0.4);
  line-height: 20px;
}
.rihgt-title:hover {
  color: rgba(0, 0, 0, 0.59);
}
.title2 {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.6);
  line-height: 22px;
  margin-left: @radius-hw-box4;
  margin-right: @radius-hw-box3;
}
.title3 {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.9);
  line-height: 22px;
}
.title4 {
  color: #e62b17;
  line-height: 22px;
  font-size: 16px;
  margin: 0 6px;
}
.title5 {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.9);
  line-height: 22px;
}
.hw-box-style-flex-r-center {
  span {
    margin-left: 8px;
    font-size: 16px;
  }
}
.hw-flex-style-b-c {
  height: 60px;
  // margin-bottom: 24px;
}
.scroll-box {
  height: 310px;
  overflow: scroll;
}
:deep(.t-card__body) {
  padding-top: 0 !important;
}
:deep(.t-timeline-item__content) {
  padding-bottom: 20px;
}
:deep(.t-timeline-item__wrapper .t-timeline-item__dot) {
  width: 8px;
  height: 8px;
  border: 2px solid #e62b17;
}
.content-text {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 24px;
}
.title6 {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.59);
  line-height: 24px;
}
.title7 {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.38);
  line-height: 22px;
}
</style>
